<template>
  <!-- 放款管理 -->

  <!-- 放款管理 -->
  <div>
    <div>法务审核</div>
    <div class="fksh">
      <p>法务审核</p>
      <div class="qymc">
        <el-select v-model="value" class="m-2" placeholder="企业名称">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="small"
          />
        </el-select>
      </div>
      <div class="ssk">
        <el-input
          v-model="input1"
          class="w-50 m-2"
          placeholder="请输入要查询的核心企业名称"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="zt">
        <el-select v-model="value1" class="m-2" placeholder="状态">
          <el-option
            v-for="item in options1"
            :key="item.value1"
            :label="item.label1"
            :value="item.value1"
            size="small"
          />
        </el-select>
      </div>
      <div class="annv">
        <el-button type="primary">查询</el-button>
        <el-button class="cz">重置</el-button>
        <el-button class="dc"
          ><el-icon> <DocumentChecked /> </el-icon>导出</el-button
        >
        <el-button class="xz"
          ><el-icon> <Plus /> </el-icon>新增</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" width="80">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.$index + 1 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业名称" width="120">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="社会信用代码" width="190">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.daima }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="注册资本" width="160">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.zhucezb }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="业务员">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.yewuy }}</span>
            </div>
            <div class="annv">
              <el-button type="primary">查询</el-button>
              <el-button class="cz">重置</el-button>
              <el-button class="dc"
                ><el-icon> <DocumentChecked /> </el-icon>导出</el-button
              >
              <el-button
                class="xz"
                style="margin-left: 16px; background-color: #fff"
                @click="drawer = true"
                ><el-icon> <Plus /> </el-icon>新增</el-button
              >
            </div>
            <!-- 抽屉 -->
            <el-drawer
              v-model="drawer"
              title="I am the title"
              :with-header="false"
            >
              <!-- 表单 -->
              <el-form class="form" :model="form" :rules="rules" ref="formref">
                <el-form-item label="开户机构" prop="htAccountbody">
                  <el-input
                    v-model="form.htAccountbody"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="借款主体" prop="htAmounbody">
                  <el-input
                    v-model="form.htAmounbody"
                    placeholder="例如:个人贷款"
                  />
                </el-form-item>
                <el-form-item label="借款金额" prop="htAmounmoney">
                  <el-input
                    v-model="form.htAmounmoney"
                    placeholder="例如:10000"
                  />
                </el-form-item>
                <el-form-item label="借款用途" prop="htAmounusage">
                  <el-input
                    v-model="form.htAmounusage"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="违约利率" prop="htBreachrates">
                  <el-input
                    v-model="form.htBreachrates"
                    placeholder="例如:1000"
                  />
                </el-form-item>
                <el-form-item label="企业名称" prop="htBusinessname">
                  <el-input
                    v-model="form.htBusinessname"
                    placeholder="例如:ABC有限公司"
                  />
                </el-form-item>
                <el-form-item label="合同编号" prop="htContractid">
                  <el-input
                    v-model="form.htContractid"
                    placeholder="例如:1000"
                  />
                </el-form-item>
                <el-form-item label="客户名称" prop="htCustomer">
                  <el-input
                    v-model="form.htCustomer"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="附件" prop="htFiles">
                  <el-input
                    v-model="form.htFiles"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="放款人信息" prop="htLenders">
                  <el-input
                    v-model="form.htLenders"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="月利率" prop="htMonthrates">
                  <el-input
                    v-model="form.htMonthrates"
                    placeholder="例如:1000"
                  />
                </el-form-item>
                <el-form-item label="付款账号" prop="htPaymentaccount">
                  <el-input
                    v-model="form.htPaymentaccount"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="手续费率" prop="htPremiumrates">
                  <el-input
                    v-model="form.htPremiumrates"
                    placeholder="例如:1000"
                  />
                </el-form-item>
                <el-form-item label="流程状态" prop="htProcessstatus">
                  <el-input
                    v-model="form.htProcessstatus"
                    placeholder="例如:待审批"
                  />
                </el-form-item>
                <el-form-item label="产品名称" prop="htProductname">
                  <el-input
                    v-model="form.htProductname"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="注册资本" prop="htRegisteredmoney">
                  <el-input
                    v-model="form.htRegisteredmoney"
                    placeholder="例如:1000"
                  />
                </el-form-item>
                <el-form-item label="还款方式" prop="htRepaymentway">
                  <el-input
                    v-model="form.htRepaymentway"
                    placeholder="例如:等额本息"
                  />
                </el-form-item>
                <el-form-item label="业务员" prop="htSalesman">
                  <el-input v-model="form.htSalesman" placeholder="例如:张三" />
                </el-form-item>
                <el-form-item label="签署地址" prop="htSignnadderss">
                  <el-input
                    v-model="form.htSignnadderss"
                    placeholder="例如:中国银行"
                  />
                </el-form-item>
                <el-form-item label="签署日期" prop="htSignndate">
                  <el-input
                    v-model="form.htSignndate"
                    placeholder="例如:2023-04-09 14:04:31"
                  />
                </el-form-item>
                <el-form-item label="社会信用代码" prop="htSocialcreditid">
                  <el-input
                    v-model="form.htSocialcreditid"
                    placeholder="例如:91110000100010433L"
                  />
                </el-form-item>
                <el-form-item label="业务开始时间" prop="htStarttime">
                  <el-input
                    v-model="form.htStarttime"
                    placeholder="例如:2023-04-09 14:04:31"
                  />
                </el-form-item>
                <el-form-item label="期限" prop="htTerm">
                  <el-input v-model="form.htTerm" placeholder="例如:180" />
                </el-form-item>
                <el-form-item label="期限类型" prop="htTermtype">
                  <el-input v-model="form.htTermtype" placeholder="例如:月" />
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="btn"
                    type="primary"
                    @click="onSubmit(formref)"
                    >新增</el-button
                  >
                </el-form-item>
              </el-form>
            </el-drawer>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="序号" width="80">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span>{{ scope.$index + 1 }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="企业名称" width="120">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{
                      scope.row.htBusinessname
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="社会信用代码" width="190">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{
                      scope.row.htSocialcreditid
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="注册资本" width="160">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{
                      scope.row.htRegisteredmoney
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="业务员">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{
                      scope.row.htSalesman
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="流程状态">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{
                      scope.row.htProcessstatus
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="任务开始时间">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{
                      scope.row.htStarttime
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-tooltip content="查看">
                    <el-icon
                      class="xyj"
                      @click="tiaozhuan(scope.row.htContractid)"
                      color="rgb(78, 171, 254)"
                    >
                      <View />
                    </el-icon>
                  </el-tooltip>

                  <el-icon @click="open" color="rgb(78, 171, 254)">
                    <Promotion />
                  </el-icon>
                </template>
              </el-table-column>
            </el-table>
            <div class="fy">
              <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[10, 15]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="流程状态">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.zhuangtao }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="任务开始时间">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-icon class="xyj" @click="tiaozhuan" color="rgb(78, 171, 254)">
              <View />
            </el-icon>
            <el-icon @click="open" color="rgb(78, 171, 254)">
              <Promotion />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
      <div class="fy">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 15]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { reactive, ref, markRaw } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { QuestionFilled } from '@element-plus/icons-vue'
import service from '@/apis/zxh'
import { useZxhStore } from '@/stores/zxh/zxh'
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'

const drawer = ref(false)
var zxhStore = useZxhStore()
var tableData = ref([])
var form = ref({
    htAccountbody: '',
    htAmounbody: '',
    htAmounmoney: 0,
    htAmounusage: '',
    htBreachrates: 0,
    htBusinessname: '',
    htContractid: 34,
    htCustomer: '',
    htFiles: '',
    htLenders: '',
    htMonthrates: 0,
    htPaymentaccount: '',
    htPremiumrates: 0,
    htProcessstatus: '',
    htProductname: '',
    htRegisteredmoney: 0,
    htRepaymentway: '',
    htSalesman: '',
    htSignnadderss: '',
    htSignndate: '',
    htSocialcreditid: '',
    htStarttime: '',
    htTerm: 0,
    htTermtype: '',
})
var formref = ref();

const rules = {
    htAccountbody: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htAmounbody: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htAmounmoney: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htAmounusage: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htBreachrates: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htBusinessname: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htContractid: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htCustomer: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htFiles: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htLenders: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htMonthrates: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htPaymentaccount: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htPremiumrates: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htProcessstatus: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htProductname: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htRegisteredmoney: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htRepaymentway: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htSalesman: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htSignnadderss: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htSignndate: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htSocialcreditid: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htStarttime: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htTerm: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
    htTermtype: [
        { required: true, message: '请输入', trigger: 'change' }
    ],
}

onMounted(async () => {
    var res = await service.zxh.ht_Contract();
    console.log(res.data.data);
    tableData.value = res.data.data
})



const router = useRouter();

const currentPage4 = ref();
const pageSize4 = ref();
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

const input1 = ref("");
const value = ref("");
const value1 = ref("");


interface User {
  date: string;
  name: string;
  daima: string;
  zhucezb: string;
  yewuy: string;
  zhuangtao: string;
}
const options = [
  {
    value: "企业名称",
    label: "企业名称",
  },
  {
    value: "社会信用代码",
    label: "社会信用代码",
  },
];
const options1 = [
  {
    value1: "全部",
    label1: "全部",
  },
  {
    value1: "待审批",
    label1: "待审批",
  },
  {
    value1: "已审批",
    label1: "已审批",
  },
];

const open = () => {

    ElMessageBox.confirm(
        '是否确认要提交进件申请？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
            icon: markRaw(QuestionFilled),
        }
    )
}

const tiaozhuan = (id: any) => {
    router.push("/home/loan/loanaa")
    zxhStore.save_zxhPath({ 'id': id })
    localStorage.setItem('id', id)
}

// 表单验证
var onSubmit = (formEl:any) => {
    //获取Form组件实例, 调用validate方法, 手动验证表单数据
    formEl.validate(async (valid:any) => {
        if (valid) {
            var res = await service.zxh.addht_Contract(form.value);
            console.log(res.data);
            if (res.status == 200) {
                //提示"新增成功!"
                ElNotification.closeAll();
                ElNotification.success({ message: '新增成功!' });
                location.reload()
            } else {
                //提示"新增失败!"
                ElNotification.closeAll();
                ElNotification.error({ message: '新增失败!' });
            }
        }
    })
}

</script>

<style scoped>
.fksh p {
  background-color: rgb(78, 171, 254);
  color: #fff;
  width: 200px;
  height: 40px;
  border-radius: 50px;
  text-align: center;
  line-height: 40px;
}

.fksh .qymc {
  display: inline-block;
  width: 100px;
}

.fksh .ssk {
  display: inline-block;
  width: 250px;
  margin: 0 20px;
}

.fksh .zt {
  display: inline-block;
  margin: 0 20px 0 0;
  width: 100px;
}

.fksh .dc,
.xz,
.cz {
  color: rgb(78, 171, 254);
}

.fksh .annv {
  display: inline-block;
}

.fksh .annv .dc {
  margin-left: 250px;
}

.fksh .xyj {
  margin-right: 15px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.el-pagination {
  justify-content: center;
}

.fksh .el-table tr th {
  text-align: center;
}
</style>